<template>
  <div class="sys-company">
    <div style="width: 100%; height: calc(100% - 56px); overflow-y: auto;">
      <div class="app-header-container">
        <el-row>
          <el-col :span="20">
            <el-form
              :model="queryParams"
              ref="queryForm"
              :inline="true"
              v-show="showSearch"
            >
              <el-form-item prop="contractNo">
                <el-input
                  v-model="queryParams.contractNo"
                  placeholder="合同编号"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item prop="contractName">
                <el-input
                  v-model="queryParams.contractName"
                  placeholder="合同名称"
                  clearable
                  size="small"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item prop="signUnit">
                <el-select
                  v-model="queryParams.signUnit"
                  placeholder="合同单位"
                  clearable
                  size="small"
                  filterable
                >
                  <el-option
                    v-for="item in unitOptions"
                    :key="item.companyID"
                    :label="item.companyName"
                    :value="item.companyName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button type="danger" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="4" class="text-right">
            <el-button
              type="primary"
              @click="handleAdd"
              v-hasPermi="['system:contract:add']"
            >
              新增
            </el-button>
          </el-col>
        </el-row>
      </div>

      <div class="app-content-container">
        <el-table v-loading="loading" :data="contractList">
          <el-table-column
            prop="rowNumber"
            label="序号"
            align="center"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="contractNo"
            label="合同编号"
            min-width="10%"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="contractName"
            label="合同名称"
            min-width="15%"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="signUnit"
            label="合同单位"
            min-width="20%"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="contractTime"
            label="合同期限"
            min-width="20%"
            align="center"
          ></el-table-column>
          <el-table-column label="是否废除" min-width="10%" align="center">
            <template slot-scope="scope">
              {{ scope.row.contractStatus === 0 ? '正常' : '废除' }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding"
            min-width="15%"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDetail(scope.row)"
                v-hasPermi="['system:contract:detail']"
              >
                详情
              </el-button>
              <!-- @click="handleAdd(scope.row)"-->
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:contract:edit']"
              >
                修改
              </el-button>
              <el-button
                v-if="scope.row.contractStatus === 1"
                size="mini"
                type="text"
                disabled
                v-hasPermi="['system:contract:edit']"
              >
                废除
              </el-button>
              <el-button
                size="small"
                type="text"
                @click="handleDrop(scope.row)"
                v-hasPermi="['system:contract:edit']"
                v-else
              >
                废除
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:contract:remove']"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <Pagination
          v-show="total > 0"
          :total="total"
          :current.sync="queryParams.currPage"
          :size.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 底部版权 slot -->
    <slot name="footer"></slot>

    <!--    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>-->
    <!--      <el-form ref="form" :model="form" :rules="rules" label-width="130px">-->
    <!--        <el-row>-->
    <!--          <el-col :span="24">-->
    <!--            <el-form-item label="单位名称" prop="name" required>-->
    <!--              <el-input v-model="form.name"/>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->

    <!--        <el-row>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item label="类别" prop="category">-->
    <!--              <el-select v-model="form.category" placeholder="请选择">-->
    <!--                <el-option-->
    <!--                        v-for="dict in categoryOptions"-->
    <!--                        :key="dict.dictValue"-->
    <!--                        :label="dict.dictLabel"-->
    <!--                        :value="dict.dictValue"-->
    <!--                />-->
    <!--              </el-select>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->

    <!--          <el-col :span="12">-->
    <!--            <el-form-item label="组别" prop="groupID">-->
    <!--              <el-select v-model="form.groupID" placeholder="请选择">-->
    <!--                <el-option-->
    <!--                        v-for="item in groupOptions"-->
    <!--                        :key="item.id"-->
    <!--                        :label="item.name"-->
    <!--                        :value="item.id"-->
    <!--                />-->
    <!--              </el-select>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->

    <!--        <el-row>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item label="联系人" prop="linkMan">-->
    <!--              <el-input v-model="form.linkMan"/>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item label="电话" prop="mobile">-->
    <!--              <el-input v-model="form.mobile"/>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->

    <!--        <el-row>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item label="重点监控对象">-->
    <!--              <el-select v-model="form.monitorObject" placeholder="请选择">-->
    <!--                <el-option-->
    <!--                        v-for="dict in monitorObjectOptions"-->
    <!--                        :key="dict.dictValue"-->
    <!--                        :label="dict.dictLabel"-->
    <!--                        :value="dict.dictValue"-->
    <!--                />-->
    <!--              </el-select>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->

    <!--          </el-col>-->
    <!--        </el-row>-->

    <!--        <el-row>-->
    <!--          <el-col :span="24">-->
    <!--            <el-form-item label="资质有效期">-->
    <!--              <el-date-picker-->
    <!--                      v-model="form.qualityArr"-->
    <!--                      format="yyyy 年 MM 月 dd 日"-->
    <!--                      value-format="yyyy-MM-dd"-->
    <!--                      type="daterange"-->
    <!--                      range-separator="至"-->
    <!--                      start-placeholder="开始日期"-->
    <!--                      end-placeholder="结束日期">-->
    <!--              </el-date-picker>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->

    <!--        <el-row>-->
    <!--          <el-col :span="24">-->
    <!--            <el-form-item label="安全许可证有效期">-->
    <!--              <el-date-picker-->
    <!--                      v-model="form.safePermitArr"-->
    <!--                      format="yyyy 年 MM 月 dd 日"-->
    <!--                      value-format="yyyy-MM-dd"-->
    <!--                      type="daterange"-->
    <!--                      range-separator="至"-->
    <!--                      start-placeholder="开始日期"-->
    <!--                      end-placeholder="结束日期">-->
    <!--              </el-date-picker>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->

    <!--        <el-row>-->
    <!--          <el-col :span="24">-->
    <!--            <el-form-item label="备注" prop="remark">-->
    <!--              <el-input v-model="form.remark" type="textarea" maxlength="150" show-word-limit />-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->

    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="cancelAddCompany">取 消</el-button>-->
    <!--        <el-button type="primary" @click="submitAddCompanyForm">确 定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
  import {
    listContract,
    getContract,
    deleteContract,
    dropContract
  } from '@/api/system/contract'
  import {
    allCompany
  } from '@/api/system/company'

  export default {
    name: 'Contract',
    components: {},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格树数据
        contractList: [],
        unitOptions: [],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [
            {required: true, message: '单位名称不能为空', trigger: 'blur'},
            {
              min: 2,
              max: 10,
              message: '长度在 2 到 10 个字符',
              trigger: 'blur',
            },
          ],
        },
        // 查询参数
        queryParams: {
          contractNo: undefined,
          contractName: undefined,
          signUnit: undefined,
          currPage: 1,
          pageSize: 10
        },
      }
    },
    mounted() {
      let that = this
      this.$bus.$on('contract-update', function() {
        that.getList()
      })
    },
    created() {
      this.getList()
      this.getUnitOptions()
    },
    methods: {
      getUnitOptions(){
        allCompany().then((response) => {
          this.unitOptions = response.data
        })
      },
      /** 查询合同列表 */
      getList() {
        this.loading = true
        listContract(this.queryParams).then((response) => {
          let data = response.data
          data.forEach((item) => {
            item.contractTime = item.contractSTime + ' 至 ' + item.contractETime
          })
          this.contractList = data

          this.total = response.page.total
          this.loading = false
        })
      },

      // 取消按钮
      cancelAddCompany() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      /** 新增按钮操作 */
      handleAdd(row) {
        this.$router.push(`/system/contract/detail/add/${row.contractId}`)
      },
      /** 详情按钮操作 */
      handleDetail(row) {
        this.$router.push(`/system/contract/detail/detail/${row.contractId}`)
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.$router.push(`/system/contract/detail/update/${row.contractId}`)
      },
      /** 废弃按钮 **/
      handleDrop(row) {
        let id = row.contractId
        this.$confirm(
          '是否确认废除合同编号为"' + row.contractNo + '"的数据项?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(function () {
            return dropContract({id})
          })
          .then(() => {
            this.getList()
            this.msgSuccess('废除成功')
          })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        let id = row.contractId
        this.$confirm('是否确认删除合同编号为"' + row.contractNo + '"的数据项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function () {
            return deleteContract({id})
          })
          .then(() => {
            this.getList()
            this.msgSuccess('删除成功')
          })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .sys-company {
    width: 100%;
    height: 100%;
  }
</style>
